<!--
 * @Description: text
 * @LastEditors: 蔡霸霸
 * @LastEditTime: 2021-03-30 11:29:05
-->
<template>
  <div class="container pt-3" @mousedown="mousedown">
    <h1 class="mb-4">
      TodoList - 待办事项列表 🐱‍🏍
      <button
        type="button"
        class="btn btn-secondary btn-sm "
        @click="clearAll()"
      >
        清空所有
      </button>
    </h1>
    <h2 class="mb-4">
      共有 <span class="text-primary">{{ lists.length }}</span> 条任务，其中
      <span class="text-success">{{ finish.length }}</span> 条已完成，<span
        class="text-warning"
        >{{ lists.length - finish.length }}</span
      >
      未完成
    </h2>

    <div class="mb-3">
      <h3 class="mb-3">添加新任务</h3>
      <input
        type="text"
        class="mb-3 form-control"
        v-model="value"
        @keyup.enter="add()"
        placeholder="输入任务"
      />
      <div class="d-grid gap-2">
        <button class="btn btn-primary" type="button" @click="add()">
          添加
        </button>
      </div>
    </div>

    <h3 class="mb-3">
      正在进行
      <span class="text-warning">{{ lists.length - finish.length }}</span>
    </h3>
    <ul class="list-group mb-3">
      <!-- <li class="list-group-item active" aria-current="true">An active item</li> -->
      <template v-for="(item, index) in lists">
        <li
          :key="'item-' + index"
          v-if="!item.isCheck"
          :class="['list-group-item d-flex justify-content-between']"
        >
          <div class="form-check">
            <input
              class="form-check-input"
              type="checkbox"
              v-model="item.isCheck"
              @click="() => (item.isCheck = !item.isCheck)"
              title="点击完成"
            />
            <label
              class="form-check-label"
              v-if="!item.isEdit"
              @dblclick="showEdit(item, index)"
            >
              {{ item.name }}
            </label>
            <label class="form-check-label" v-else>
              <input type="text" v-model="item.name" ref="editInput" />
            </label>
          </div>
          <button
            type="button"
            class="btn-close"
            aria-label="Close"
            @click="remove(index)"
            title="永久删除"
          ></button>
        </li>
      </template>
    </ul>
    <h3 class="mb-3">
      已经完成
      <span class="text-success">{{ finish.length }}</span>
    </h3>
    <ul class="list-group mb-3">
      <li
        class="list-group-item d-flex justify-content-between"
        v-for="(item, index) in finish"
        :key="'finish-' + index"
        @dblclick="() => (item.isCheck = !item.isCheck)"
        title="双击撤回"
      >
        <div class="form-check">
          <input
            class="form-check-input"
            type="checkbox"
            v-model="item.isCheck"
            disabled
          />
          <label class="form-check-label" style="user-select:none;">
            {{ item.name }}
          </label>
        </div>
        <button
          type="button"
          class="btn-close"
          aria-label="Close"
          @click="remove(index)"
          title="永久删除"
        ></button>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, computed, reactive, toRefs, onMounted, watch } from 'vue'
export default {
  name: 'Home',
  setup () {
    // 正在编辑输入框的下标
    let editIndex = 0

    // 编辑输入框的ref
    const editInput = ref(null)

    // 添加任务
    const add = () => {
      if (!state.value || state.value === '') return false
      state.lists.push({
        name: state.value,
        isCheck: false,
        isEdit: false
      })
      state.value = ''
    }

    // 删除任务
    const remove = index => {
      state.lists.splice(index, 1)
    }

    // 编辑任务
    const showEdit = (item, index) => {
      editIndex = index
      item.isEdit = true
    }

    // 取消输入框打开
    const mousedown = e => {
      const event = e || window.event
      const target = event.target || event.srcElement
      if (editInput.value && target !== editInput.value) {
        if (state.lists[editIndex].name === '') {
          remove(editIndex)
        } else {
          state.lists[editIndex].isEdit = false
        }
      }
    }

    // 清空所有
    const clearAll = () => {
      state.lists = []
    }

    // 声明函数及变量
    const state = reactive({
      editValue: '',
      value: '',
      lists: [],
      finish: computed(() => state.lists.filter(e => e.isCheck)),
      add,
      remove,
      showEdit,
      mousedown,
      editInput,
      clearAll
    })

    // 页面dom加载完成钩子函数
    onMounted(() => {
      try {
        // 从本地缓存中获取上一次的数据并解析
        const todo = JSON.parse(localStorage.todoList)
        state.lists = todo
      } catch (err) {}
    })

    // 监听数据变化并保存本地
    watch(
      () => state.lists,
      (oldVlaue, newValue) => {
        // console.log(newValue)
        localStorage.todoList = JSON.stringify(state.lists)
      },
      {
        // lazy: true,
        deep: true
        // flush: 'pre' | 'post' | 'sync',
        // flush: 'pre'
        // onTrack: e => console.log('onTrack'),
        // onTrigger: e => console.log('onTrigger')
      }
    )

    return toRefs(state)
  }
}
</script>
<style lang="scss" scoped></style>
